<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>活动个人信息提交</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body style="background: #fff;">

<!-- 头部 -->
<section id="hd">
    <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
    <h3>提交信息</h3>
</section>
<!-- 头部 end-->


<!-- 主内容 -->
<section id="bd">
    <form action="">
        <div class="m-sub-inf">
            <div class="inp"><input type="text" v-model="form.name" placeholder="个  人  姓  名"></div>
            <div class="inp"><input type="text" v-model="form.phone" placeholder="请输入手机号"></div>
            <div class="inp">
                <input class="input-code" type="text" v-model="form.validecode" placeholder="请输入验证码">
                <!-- 获取验证码 -->
                <input type="button" @click="getCheckCode" id="phone-btn" value="获取手机验证码"/>
                <!-- 获取验证码 end-->
            </div>
            <input class="m-btn3" type="submit" @click.prevent="submit" value="提交信息">
        </div>
    </form>
    <!-- 弹出框:成功 -->
    <div class="m-pop dn" id="sub-s">
        <div class="pop-bg"></div>
        <div class="inner">
            <p>{{message}}</p>
        </div>
    </div>
    <!-- 弹出框:成功 end-->
</section>
<!-- 主内容 end-->





<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var param = parseQueryString(location.search);
    var id=param.id;
    var vm=new Vue({
        el:'#bd',
        data:{
            form:{
                id:id,
                name:'',
                phone:'',
                validecode:''
            },
            message:'报名成功'
        },
        methods:{
            submit:function () {
                var _=this;
                axios.activity('/apply',this.form)
                    .then(function (res) {
                        if(res.data.Code===0){
                            _.message='报名成功';
                            $('.m-pop,.pop-bg').show();
                        }else if(res.data.Code===2){
                            _.message="请先登录";
                            setTimeout(function () {
                                goLogin()
                            },2000)
                        }else{
                            _.message=res.data.Data;
                            $('.m-pop,.pop-bg').show();
                        }
                    })
            },
            getCheckCode:function () {
                var _=this;
                axios.student('/applycode',{
                    phone:_.form.phone,
                    type:3,
                    activityid:id
                }).then(function (res) {

                })
            }
        }
    })
</script>
<script type="text/javascript">
    //发送验证码
    var wait = 60;
    document.getElementById("phone-btn").disabled = false;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            //$(o).attr("disabled", false);  jquery
            o.value = "获取手机验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = wait + "秒后,重试";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }
    document.getElementById("phone-btn").onclick =
        function () {
            time(this);
        }
</script>

</body>
</html>